<template>
  <div>
    <el-select v-model="closeid" placeholder="用工方式" @change="xm()">
      <el-option
        v-for="item in close"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <el-dialog title="按项目计费" :visible.sync="dialogTable">
    <el-input placeholder="标题" v-model="title"></el-input>
    <el-input placeholder="描述" v-model="described"></el-input>
    <el-input placeholder="需求" v-model="cc"></el-input>
    <el-button @click="dialogTableVisible = true">需求类型</el-button>
    <el-dialog title="需求类型" :visible.sync="dialogTableVisible">
      <el-tabs v-model="needid" @tab-click="handleClick">
        <el-tab-pane :label="i.name" v-for="(i, x) in need" :key="x">
          <div v-for="(j, p) in i.son" :key="p">
            {{ j.name }}
            <div v-for="(q, d) in j.tow_son" :key="d">
              <el-button @click="tj(q.name)">{{ q.name }}</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs></el-dialog
    >
    <el-input placeholder="预算" v-model="money"></el-input>
    <el-button @click="ti">提交</el-button></el-dialog>
    <el-dialog title="按时间计费" :visible.sync="dialog">
    <el-input placeholder="标题" v-model="title"></el-input>
    <el-input placeholder="描述" v-model="described"></el-input>
    <el-input placeholder="需求" v-model="cc"></el-input>
    <el-button @click="dialogTableVisible = true">需求类型</el-button>
    <el-dialog title="需求类型" :visible.sync="dialogTableVisible">
      <el-tabs v-model="needid" @tab-click="handleClick">
        <el-tab-pane :label="i.name" v-for="(i, x) in need" :key="x">
          <div v-for="(j, p) in i.son" :key="p">
            {{ j.name }}
            <div v-for="(q, d) in j.tow_son" :key="d">
              <el-button @click="tj(q.name)">{{ q.name }}</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs></el-dialog
    >
    <el-input placeholder="预算" v-model="money"></el-input>
    <el-button @click="ti">提交</el-button></el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      close: "",
      closeid: "",
      need: "",
      dialogTableVisible: false,
      cc: "",
      title: "",
      described: "",
      needid: "",
      money: "",
      dialogTable:false,
      dialog:false
    };
  },
  mounted() {
    this.getclose();
    this.getneed();
  },
  methods: {
    getclose() {
      this.axios.get("/getclose").then((res) => {
        this.close = res.data.data;
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getneed() {
      this.axios.get("/getneed").then((res) => {
        this.need = res.data.data;
      });
    },
    tj(name) {
      this.cc = name;
      this.dialogTableVisible = false;
    },
    xm() {
        if(this.closeid == 1){
            this.dialogTable=true
        }else{
            this.dialog = true
        }
      alert(this.closeid);
    },
    ti() {},
  },
};
</script>

<style>
</style>